<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
  <script src="js/mobileSelect.js" type="text/javascript"></script>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" ></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      background-color: #efedd6;
      width: 100%;
      height: 100%;
    }
    .mainDiv{
      width: 100%;
      height: 100%;
      background-color: white;
      /*position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);*/
    }
    .topDiv{
      width: 100%;
      height: 20%;
      background-color: #efedd6;
      position: sticky;
      top: 0;
    }
    #bodyDiv{
      width: 100%;
      height: 80%;
    }
  </style>
</head>
<body>
<div class="mainDiv">

  <div class="topDiv">
    <div id="check"></div>
    <div>
      <button onclick="test()">查询</button>
    </div>
  </div>

  <div id="bodyDiv">
    <div>
      <select id="selt"></select>
    </div>
    <div>
      <button id="apply">提交</button>
    </div>
  </div>
</div>

</body>
<script type="text/javascript">
  var t=new Date();
  var year=t.getFullYear();
  var month=t.getMonth()+1;
  var nextMonth=t.getMonth()+2;
  var dayOne=t.getDate();
  var dayTwo=t.getDate()+1;
  var dayThree=t.getDate()+2;
  var dayFour=t.getDate()+3;
  var dayFive=t.getDate()+4;
  var daySix=t.getDate()+5;
  var daySeven=t.getDate()+6;
  const mobileSelect2 = new MobileSelect({
    trigger: '#check',
    title: '时间选择',
    wheels: [

      {
        data: [
          {id: '1', value: '月'},
          {id: '2', value: month},
          {id: '3', value: nextMonth},
        ]
      },
      {
        data: [
          {id: '1', value: '日'},
          {id: '2', value: dayOne},
          {id: '3', value: dayTwo},
          {id: '4', value: dayThree},
          {id: '5', value: dayFour},
          {id: '6', value: dayFive},
          {id: '7', value: daySix},
          {id: '8', value: daySeven},
        ]
      },
      {
        data: [
          {id: '1', value: '开始'},
          {id: '2', value: 0},
          {id: '3', value: 1},
          {id: '4', value: 2},
          {id: '5', value: 3},
          {id: '6', value: 4},
          {id: '7', value: 5},
          {id: '8', value: 6},
          {id: '9', value: 7},
          {id: '10', value: 8},
          {id: '11', value: 9},
          {id: '12', value: 10},
          {id: '13', value: 11},
          {id: '14', value: 12},
          {id: '15', value: 13},
          {id: '16', value: 14},
          {id: '17', value: 15},
          {id: '18', value: 16},
          {id: '19', value: 17},
          {id: '20', value: 18},
          {id: '21', value: 19},
          {id: '22', value: 20},
          {id: '23', value: 21},
          {id: '24', value: 22},
          {id: '25', value: 23},
          {id: '26', value: 24},
        ]
      },
      {
        data: [
          {id: '1', value: '结束'},
          {id: '2', value: 0},
          {id: '3', value: 1},
          {id: '4', value: 2},
          {id: '5', value: 3},
          {id: '6', value: 4},
          {id: '7', value: 5},
          {id: '8', value: 6},
          {id: '9', value: 7},
          {id: '10', value: 8},
          {id: '11', value: 9},
          {id: '12', value: 10},
          {id: '13', value: 11},
          {id: '14', value: 12},
          {id: '15', value: 13},
          {id: '16', value: 14},
          {id: '17', value: 15},
          {id: '18', value: 16},
          {id: '19', value: 17},
          {id: '20', value: 18},
          {id: '21', value: 19},
          {id: '22', value: 20},
          {id: '23', value: 21},
          {id: '24', value: 22},
          {id: '25', value: 23},
          {id: '26', value: 24},
        ]
      },
      {
        data: [
          {id: '1', value: '会议室大小'},
          {id: '2', value: 30},
          {id: '3', value: 70},
          {id: '4', value: 80},
          {id: '5', value: 90},
          {id: '6', value: 100},
        ]
      }
    ],
    position: [1, 1, 1, 1,1,1],
    callback: function (indexArr, data) {
      var result=data;
      var str={
        "date": "2022-02-28",
        "suit": 72,
        "start": 10,
        "end": 12
      };
      str.date="2022-0"+result[0].value+"-"+result[1].value;
      str.start=result[2].value;
      str.end=result[3].value;
      str.suit=result[4].value;
      var strs={
        "Apply": {
          "date": "2022-02-28",
          "reason": "",
          "phone": "",
          "start": 14,
          "end": 16,
          "rid": "1-101",
          "userid": "1905050126",
          "status": 0
        }
      }
      strs.Apply.date="2022-0"+result[0].value+"-"+result[1].value;
      strs.Apply.start=result[2].value;
      strs.Apply.end=result[3].value;
      $.ajax({
        type: "post",
        url: "http://86r33i.natappfree.cc/user/fastapply",
        dataType: "json",
        async:false,
        contentType: 'application/json',
        jsonp: 'callback',
        data:JSON.stringify(str),
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
        },
        success: function (data) {

          var json =  data ;
          var  stl="";
          for(var i in json.rooms){
            stl+= "<option>"+json.rooms[i]+"</option>";
          }
          $("#selt").empty();
          $("#selt").append(stl);
          apply.onclick=function (){
            b=$("#selt").find("option:selected").val();
            strs.Apply.rid=b;
            $.ajax({
              type: "post",
              url: "http://86r33i.natappfree.cc/user/apply",
              dataType: "json",
              async:false,
              contentType: 'application/json',
              jsonp: 'callback',
              data:JSON.stringify(strs),
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
              },
              success: function (data) {
                console.log(data.status);
              }
            });
          }
        }
      });
    }
  });
  function test(){
    mobileSelect2.show();
    $("#check").empty();
  }

</script>
</html>